<template>
	<div class="header-class">
	    <!-- <img :src="'/public/images/'+(id%5)+'.jpg'"/> -->
	    <img/>
	    <div class="dropdown" id="dropdown">
	        <a href="##" data-toggle="dropdown" class="dropdown-toggle">
	            {{user.name}}<span class="caret"></span>
	        </a>
	        <ul class="dropdown-menu pull-right">
	            <li ><a href="/Account/setting"><span class="glyphicon glyphicon-user"></span> 个人设置</a></li>
	            <li ><a href="/index/logout"><span class="glyphicon glyphicon-log-out"></span> 安全退出</a></li>
	        </ul>
	    </div>
	    <div class="class-info">
	        <h1>{{classInfo.cla_name}} - {{classInfo.cou_name}}</h1>
	        <p>使用以下邀请码邀请学生加课</p>
	        <p>{{classInfo.cla_code}}</p>
	    </div>
	</div>
	<div class="navbar navbar-default">
	    <div class="row">
	        <div class="navbar-header col-md-4 ">
	            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
	                <span class="sr-only">Toggle Navigation</span>
	                <span class="icon-bar"></span>
	                <span class="icon-bar"></span>
	                <span class="icon-bar"></span>
	            </button>
	            <a href="/Class/classes.html" class="navbar-brand left">
	                <i class="fa fa-long-arrow-left"></i>
	                课堂
	            </a>
	        </div>
	        <div class="collapse navbar-collapse navbar-responsive-collapse">
	            <div class="col-md-4 ">
	                <ul class="nav navbar-nav nav-class">
	                    <li :class="{'active': action=='testPapers'}"><a :href="'/TestPaper/testPapers.html?cad='+classInfo.cla_id">测试</a></li>
	                    <li :class="{'active': action=='student'}"><a :href="'/Students/students.html?cad='+classInfo.cla_id">成员</a></li>
	                    <li :class="{'active': action=='grade'}"><a :href="'/Grade/grade.html?cad='+classInfo.cla_id">成绩</a></li>
	                </ul>
	            </div>
	        </div>
	    </div>
	</div>
</template>

<script>
	import auth from '../../Component/Auth/auth.js';
	export default {
		created: function() {
			var id = location.search.slice(1).split('=')[1];
			this.classInfo = {};
			//this.bgPath = 'img/'+id%5+'.jpg'
			this.$http.post('/Class/getClassInfo', {cla_id: id}).then(function(resp) {
	            if (resp.data.status === 1) {
	               	this.classInfo = resp.data.data;
	            }
		    })
		},
		ready: function() {
			var id = location.search.slice(1).split('=')[1];
		    $(".class-info").css("opacity","1");
			$('.header-class img')[0].src = require('./img/'+(id%5)+'.jpg');
		},
		props: ['action', 'classInfo'],
		data: function() {
			return {
				user: auth.getInfo(),
				id: 0
			}
		},
		methods: {
			
		}
	}
	
</script>

<style >
	 body{
	    overflow-x: hidden;
	} 
	.nav-class {
	    width: 100%;
	    display: block;
	    font-size: 17px;
	}
	.nav-class li{
	    width: 33.33%;
	    text-align: center;
	}
	.header-class {
	    width: 100%;
	    height: 250px;
	    position: relative
	}
	.header-class img{
	    width: 100%;
	    height: 250px;
	    position: absolute;
	    z-index: -999;
	}
	.header-class .dropdown{
	    position: absolute;
	    font-size:20px;
	    /*border: 1px red solid;*/
	    right: 30px;
	    top: 10px;
	}
	.header-class .dropdown-toggle,.dropdown-toggle:link{
	    color: white;
	    text-decoration: none;
	}
	.header-class .dropdown-toggle:hover{
	    color: white;
	}
	.class-info{
	    width: 100%;
	    height: 100%;
	    padding-top: 50px;
	    color: white;
	    opacity: 0;
	    -webkit-transition: all 2s ease-out;
	    -moz-transition: all  2s ease-out;
	    -ms-transition: all 2s ease-out;
	    -o-transition: all 2s ease-out;
	    transition: all 2s ease-out;
	}
	/*标题栏的放大动画效果*/
	.class-info h1,.class-info p{
	    margin: 10px auto;
	    text-align: center;
	    /*width: 700px;*/
	    -webkit-transition: all 1s ease-out;
	    -moz-transition: all 1s ease-out;
	    -ms-transition: all 1s ease-out;
	    -o-transition: all 1s ease-out;
	    transition: all 1s ease-out;
	}
	.class-info h1:hover,.class-info p:hover{
	    -webkit-transform: scale(1.2,1.2);
	    -moz-transform: scale(1.2,1.2);
	    -ms-transform: scale(1.2,1.2);
	    -o-transform: scale(1.2,1.2);
	    transform: scale(1.2,1.2);
	}
</style>